/* eslint-disable react-refresh/only-export-components */
import React, { useEffect, useState } from "react";
import Header from "../../comdentens/Header";
import { NavBar, Space, Toast, SearchBar, IndexBar, List } from "antd-mobile";
import { useLoaderData, useNavigate } from "react-router-dom";
import { dinweiApi, listApi, sousuoApi } from "../../api/city";
import styles from "./css/index.module.css";
import { useDispatch, useSelector } from "react-redux";
import { tianjia, tianjials } from "../store/slice/ticketslice";
import { useFd } from "../../hooks";
import { UnorderedListOutline } from "antd-mobile-icons";
function Index() {
  const { dingwei, list, remen } = useLoaderData();
  const tiao = useNavigate();
  const fuwuyuan = useDispatch();
  const dianji = (city) => {
    fuwuyuan(tianjia(city));
    tiao(-1);
  };
  const fd = useFd();
  const [lishia,setlishia]=useState([])
  const [sousuo, setsousuo] = useState();
  const [jieguo, setjieguo] = useState([]);
  const change = fd(async (kw) => {
    setsousuo(kw);
    const { data: res } = await sousuoApi(kw);
    setjieguo(res);
  });
  console.log(lishia)
  return (
    <div>
      <div>
        <NavBar onBack={() => tiao(-1)}>
          <SearchBar placeholder="请输入城市名称" onChange={change} />
        </NavBar>
      </div>
      {jieguo.length > 0 ? (
        <div>
          <h2>搜索列表</h2>
          {jieguo.map((item, index) => (
            <List.Item
              onClick={() => {
                dianji(item.name);
                setlishia((pav)=>[...pav,item.name]);
              }}
            >
              <span key={index}>{item.name}</span>
            </List.Item>
          ))}
        </div>
      ) : (
        <div>
          <div>
            <span
              style={{ color: "red" }}
              onClick={() => {
                dianji(dingwei.city);
              }}
            >
              {dingwei.city}
            </span>
            当前城市
          </div>
          <div>
            <h4>搜索历史</h4>
            <div className={styles.rm}>
              {lishia.map((i, n) => (
                <span
                  key={n}
                  onClick={() => {
                    dianji(i.name);
                  }}
                >
                  {i.name}
                </span>
              ))}
            </div>
          </div>
          <div>
            <h4>热们城市</h4>
            <div className={styles.lishi}>
              {remen.map((i, n) => (
                <span
                  key={n}
                  onClick={() => {
                    dianji(i.name);
                  }}
                >
                  {i.name}
                </span>
              ))}
            </div>
          </div>
          <div className={styles.list}>
            <IndexBar>
              {list.map((group) => {
                const { title, items } = group;
                return (
                  <IndexBar.Panel
                    index={title}
                    title={`标题${title}`}
                    key={`标题${title}`}
                  >
                    <List>
                      {items.map((item, index) => (
                        <List.Item
                          key={index}
                          onClick={() => {
                            dianji(item.name);
                          }}
                        >
                          {item.name}
                        </List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                );
              })}
            </IndexBar>
          </div>
        </div>
      )}
    </div>
  );
}

export default Index;
export const loader = async () => {
  const { data: res } = await dinweiApi();
  const { data: ress } = await listApi();
  return { dingwei: res, list: ress.cityList, remen: ress.hotCities };
};
